@use "utils/variables";

.SidebarHeaderDropdownButton {
    position: relative;
    display: flex;
    align-items: center;

    .header__info {
        position: relative;
        width: 100%;
        flex-grow: 1;
        padding: 3px 15px 0 8px;
        color: variables.$white;

        .team__name {
            overflow: hidden;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .user__name {
            font-weight: 400;
        }
    }

    .unread-badge {
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #f74343;
    }

    .unread-badge-addon {
        position: absolute;
        top: 8px;
        right: 4px;
        width: 12px;
        height: 12px;
        border-radius: 32px;
        background-color: var(--sidebar-header-bg);
    }

    .menu-icon {
        fill: variables.$white;
        opacity: 0.8;
    }

    &:hover {
        .user__name,
        .menu-icon {
            opacity: 1;
        }
    }
}
